<template>
  <div>
    <!-- 列设置 -->
    <el-drawer
      v-model="drawerVisible"
      :title="title"
      :size="size"
      modal-class="colDrawer"
    >
      <div class="table-main1">
        <el-table
          ref="dataTableRef"
          v-loading="loading"
          :data="tableData"
          highlight-current-row
          border
          max-height="calc(100vh - 44px - 52px - 40px)"
        >
          <!-- 表格内容操作 -->
          <template v-for="item in tableColumns" :key="item">
            <TableColumn v-if="item.prop && item.isShow" :column="item">
              <template v-for="slot in Object.keys($slots)" #[slot]="scope">
                <slot :name="slot" v-bind="scope"></slot>
              </template>
            </TableColumn>
          </template>
          <!-- <template #empty>
            <div class="table-empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </div>
          </template> -->
        </el-table>
      </div>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="tsx" name="PsmParamMonitorOthers">
import request from "@/utils/request";
import dayjs from "dayjs";
import { useDictionary } from "@/utils/useTable"; // 引入

const props = defineProps<{
  type: String;
  equipCode: String;
  alarmTime: String;
  recordCount: String;
}>();

const drawerVisible = ref<boolean>(false);

function cancelClick() {
  drawerVisible.value = false;
}

const title = ref("");
const tableData = ref([]);
const tableColumns: any = ref([]);
const api = ref("");
const size = ref("");
const loading = ref(false);
const openColSetting = async () => {
  drawerVisible.value = true;
  nextTick(async () => {
    tableData.value = [];
    const current = objectType.value[Number(props.type) - 1];
    title.value = current.name;
    api.value = current.api;
    tableColumns.value = current.data;
    size.value = current.size;
    if (api.value) {
      loading.value = true;
      const res: any = await request({
        url: current.api,
        method: "get",
        params: {
          equipCode: props.equipCode,
          alarmTime: props.alarmTime || dayjs().format("YYYY-MM-DD HH:mm:ss"),
          recordCount: props.recordCount || 50,
        },
      }).catch(() => {
        loading.value = false;
      });
      if (res.code === 200 && res.data) {
        tableData.value = res.data || [];
        // tableData.value = [
        //   {
        //     workTime: "YYYY-MM-DD HH:mm:ss",
        //     createdUserName: "mujinhong",
        //     mouldCode: "B20250227143032604",
        //     materialName: "回火线圈 ZG 625.417.15-Z1",
        //     consumeCode: "8214500250324100001-11",
        //     workOrderStatus: 1,
        //   },
        // ];
      }
      loading.value = false;
    } else {
      tableData.value = [];
    }
  });
};

const objectType = ref([
  {
    type: "1",
    name: "工装更换",
    api: "/eam/eammodworkrecord/replace/record",
    size: "620px",
    data: [
      {
        prop: "workTime",
        label: "更换时间",
        isShow: true,
        width: "170",
        align: "center",
      },
      {
        prop: "createdUserName",
        label: "更换人",
        isShow: true,
        width: "100",
        align: "center",
      },
      {
        prop: "mouldCode",
        label: "工装编码",
        isShow: true,
        minWidth: "90",
        align: "center",
      },
      {
        prop: "materialName",
        label: "工装名称",
        isShow: true,
        minWidth: "90",
        align: "left",
      },
    ],
  },
  {
    type: "2",
    name: "耗材更换",
    api: "/eam/csmworkrecord/replace/record",
    size: "620px",
    data: [
      {
        prop: "workTime",
        label: "更换时间",
        isShow: true,
        width: "170",
        align: "center",
      },
      {
        prop: "createdUserName",
        label: "更换人",
        isShow: true,
        width: "100",
        align: "center",
      },
      {
        prop: "consumeCode",
        label: "耗材编码",
        isShow: true,
        minWidth: "90",
        align: "center",
      },
      {
        prop: "materialName",
        label: "耗材名称",
        isShow: true,
        minWidth: "90",
        align: "left",
      },
    ],
  },
  {
    type: "3",
    name: "设备报警",
    api: "",
    size: "550px",
    data: [
      {
        prop: "workTime",
        label: "报警时间",
        isShow: true,
        width: "170",
        align: "center",
      },
      {
        prop: "createdUserName",
        label: "报警信息",
        isShow: true,
        width: "auto",
        align: "left",
      },
    ],
  },
  {
    type: "4",
    name: "工单记录",
    api: "",
    size: "650px",
    data: [
      {
        prop: "workTime",
        label: "工单时间",
        isShow: true,
        width: "170",
        align: "center",
      },
      {
        prop: "createdUserName",
        label: "责任人",
        isShow: true,
        width: "100",
        align: "center",
      },
      {
        prop: "memo",
        label: "监控描述",
        isShow: true,
        minWidth: "90",
        align: "left",
      },
      {
        prop: "workOrderStatus",
        label: "工单状态",
        isShow: true,
        minWidth: "40",
        align: "center",
        render: (scope: any) => (
          <span>
            {useDictionary("PsmOrderStatus", scope.row.workOrderStatus ?? "")}
          </span>
        ),
      },
    ],
  },
  {
    type: "5",
    name: "检验记录",
    api: "",
    size: "700px",
    data: [
      {
        prop: "workTime",
        label: "检验时间",
        width: "170",
        isShow: true,
        align: "center",
      },
      {
        prop: "detectionResult",
        label: "检验结果",
        width: "90",
        isShow: true,
        align: "center",
        render: (scope: any) =>
          scope.row.detectionResult == "1" ? (
            <el-tag>合格</el-tag>
          ) : (
            <el-tag type="danger">不合格</el-tag>
          ),
      },
      {
        prop: "detectionEquipName",
        label: "检具设备",
        width: "140",
        isShow: true,
        align: "center",
      },
      {
        prop: "partQrCode",
        label: "序列号",
        minWidth: "60",
        isShow: true,
        align: "left",
      },
      {
        prop: "detectionEvent",
        label: "测量代码",
        minWidth: "40",
        isShow: true,
        align: "center",
      },
    ],
  },
]);

onMounted(() => {});

defineExpose({
  openColSetting,
});
</script>

<style lang="scss">
.colDrawer {
  .el-drawer__header {
    margin-bottom: 0px !important;
  }
  .el-drawer__footer {
    padding-top: 0px;
  }
  .el-divider__text {
    font-weight: bold;
  }
  .el-table--default .cell {
    padding: 0 6px !important;
  }
  .el-table td.el-table__cell div {
    font-size: 13px;
  }
  // .table-empty {
  //   img {
  //     margin-top: 50px;
  //   }
  //   div {
  //     line-height: 20px;
  //     margin-bottom: 60px;
  //   }
  // }
}

.cursor-move {
  cursor: move;
}

.right-panel-btn {
  z-index: 200;
  position: fixed;
  right: 0;
  top: 200px;
  width: 36px;
  height: 36px;
  color: var(--el-color-white);
  text-align: center;
  cursor: pointer;
  background-color: var(--el-color-primary);
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 20px;
    height: 20px;
    vertical-align: -10px;
  }
}
</style>
